<template>
	<div class="price" v-if="props.value<1000000">
		<span class="price-currency">￥</span>
		<span class="price-integer">{{myInt}}</span>.<span class="price-decimal">{{myDec}}</span>
	</div>
	<div class="price" v-else>
		<span class="price-currency">￥</span>
		<span class="price-integer">{{myInt}}</span><span class="price-decimal">万</span>
	</div>
</template>

<script lang="ts" setup>
import {fen2Yuan} from "@/utils/validate"

const props=defineProps({
	value:{
		type: Number,
		required:true,
	}
})
const val=ref<string[]>([])
if(props.value<1000000){
	val.value = (""+fen2Yuan(props.value)).split(".")
}
else{
	let tmp = props.value/10000
	val.value .push(Math.floor(tmp)/100)
}
const myInt=computed(()=>{
	return val.value[0]||'';
})
const myDec=computed(()=>{
	return val.value[1]||'';
})
</script>

<style scoped lang="scss">
.price{
	display:inline-block;
	font-size:100%;
	&-integer{
		font-size:130%;
		font-family:Arial,sans-serif;
	}
	&-decimal{
		font-family:Arial,sans-serif;
		font-size:80%;
	}
	&-currency{
		font-family:Arial,sans-serif;
		font-size:80%;
	}
}
</style>